<template>
	<div class="sc-list">
		<div class="border-t-[1px] border-t-[#E4E4E4] border-solid px-[15px]" v-for="(item, i) in arrList" :key="i">
			<div
				class="text-[#888888] h-[44.5px] text-[14px] flex items-center justify-center  border-b-[1px] border-b-[#E4E4E4] border-solid ">
				{{ item.name }}
			</div>
			<div class="py-[15px]  flex flex-wrap gap-y-[15px]">
				<div class="w-1/4 flex justify-between items-center" v-for="(jtem, j) in item.arr" :key="j">
					<div class="w-[40px] flex justify-center items-center">
						<template v-if="item.name != '冠亚和' && !isNaN(jtem.Key as any)">
							<scBall :num="jtem.Key"></scBall>
						</template>
						<template v-else>
							{{ jtem.Key }}
						</template>
					</div>
					<div
						class="flex-1 h-[22px] bg-[#FBFBFD] rounded-[5px] border-[1px] border-[#E4E4E4] border-solid flex items-center justify-center"
						:class="{
							active: jtem.Val > 0
						}">
						{{ jtem.Val }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import scBall from "@/components/ball/sc-ball.vue";
const props = withDefaults(
	defineProps<{
		list: MonitorMoTableList;
	}>(),
	{}
);
const names = [
	"冠军",
	"亚军",
	"第三名",
	"第四名",
	"第五名",
	"第六名",
	"第七名",
	"第八名",
	"第九名",
	"第十名",
	"冠亚和"
];
watch(
	() => props.list,
	val => {
		arrList.value = val.sort((a, b) => names.indexOf(a.name) - names.indexOf(b.name));
		console.log(arrList.value);
	}
);
const arrList = ref<MonitorMoTableList>([]);
</script>
<style lang="scss" scoped>
.active {
	:deep() {
		.el-input {
			--el-input-bg-color: #dff7ff;
		}
	}
}

:deep() {
	.el-input__inner {
		text-align: center;
	}
}
</style>
